<template>
  <div class="add_user_wrap">
    <el-button
      type="primary"
      size="small"
      @click="pop_show = true;"
      class="pull-right"
      >新增优惠券</el-button
    >
    <el-dialog title="新增优惠券" :visible.sync="pop_show" append-to-body>
      <el-form :model="coupon" status-icon ref="coupon" label-width="100px">
        <el-form-item label="优惠券名称：" prop="name">
          <el-input
            type="text"
            v-model="coupon.name"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="优惠券介绍：" prop="brief">
          <el-input
            type="text"
            v-model="coupon.brief"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品：" prop="good">
          <el-select v-model="coupon.good" size="small">
            <el-option
              v-for="item in sku_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优惠券类型：" prop="coupontype_name">
          <el-select v-model="coupon.coupon_type" size="small">
            <el-option
              v-for="item in coupon_type_list"
              :key="item.id"
              :label="item.type_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优惠券使用时间：" prop="start_time">
          <el-input
            type="text"
            v-model="coupon.start_time"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="优惠券过期时间：" prop="over_time">
          <el-input
            type="text"
            v-model="coupon.over_time"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="优惠券数量：" prop="coupon_num">
          <el-input
            type="text"
            v-model="coupon.coupon_num"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="开始领取时间：" prop="over_time">
          <el-input
            type="text"
            v-model="coupon.start_get_time"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="领取结束时间：" prop="coupon_num">
          <el-input
            type="text"
            v-model="coupon.end_get_time"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input
            type="text"
            v-model="coupon.remark"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm('coupon');">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import cons from "@/components/constant";
let token = localStorage.token;
export default {
  name: "AddCoupon",
  data() {
    return {
      coupon: {
        name: "",
        coupon_type: "",
        brief: "",
        coupon_num: "",
        start_time: "",
        over_time: "",
        good: "",
        start_get_time: "",
        end_get_time: "",
        remark: ""
      },
      sku_list: [],
      coupon_type_list: [],
      pop_show: false
    };
  },
  methods: {
    // 新增
    submitForm() {
      // 实例化
      let form_data = new FormData();
      // 添加数据
      form_data.append("name", this.coupon.name);
      form_data.append("brief", this.coupon.brief);
      form_data.append("coupon_type", this.coupon.coupon_type);
      form_data.append("good", this.coupon.good);
      form_data.append("coupon_num", this.coupon.coupon_num);
      form_data.append("start_time", this.coupon.start_time);
      form_data.append("over_time", this.coupon.over_time);
      form_data.append("start_get_time", this.coupon.start_get_time);
      form_data.append("end_get_time", this.coupon.end_get_time);
      form_data.append("remark", this.coupon.remark);
      this.axios
        .post(cons.apis + "/coupons/coupons/", form_data, {
          headers: {
            Authorization: "JWT " + token
          },
          responseType: "json"
        })
        .then(dat => {
          console.log("添加>>>", dat.data);
          this.$message({
            type: "success",
            message: "添加成功!"
          });
          this.pop_show = false;
          this.$emit("fnResetTable");
        })
        .catch(err => {
          if (err.response.status == 400) {
            this.$message({
              type: "info",
              message: err.response.data
            });
          }
        });
    },
    // 获取所有优惠券类别的列表
    fnGetCouponType() {
      this.axios
        .get(cons.apis + "/coupons/types/", {
          headers: {
            Authorization: "JWT " + token
          },
          responseType: "json"
        })
        .then(dat => {
          // console.log("sp, dat.data);
          this.coupon_type_list = dat.data;
        })
        .catch(err => {
          console.log(err.response);
        });
    },
    // 获取所有商品的列表
    fnGetGoodList() {
      this.axios
        .get(cons.apis + "/imgs/sku_list/", {
          headers: {
            Authorization: "JWT " + token
          },
          responseType: "json"
        })
        .then(dat => {
          console.log("skus>>", dat.data);
          this.sku_list = dat.data;
        })
        .catch(err => {
          console.log(err.response);
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    // 获取所的规格
    this.fnGetCouponType();
    // 获取商品的列表
    this.fnGetGoodList();
  }
};
</script>

<style></style>
